<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

    <div id="student">
        <table border="1px" width="50%" cellspacing="0"  align="center">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>操作</th>
            </tr>
            <tr v-for="stu in students" align="center">
                <td>{{stu.stuNo}}</td>
                <td>{{stu.stuName}}</td>
                <td>{{stu.sex}}</td>
                <td>{{stu.birthday}}</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr align="center">
                <td><input type="text" name="stuNo" v-model="stuNo"></td>
                <td><input type="text" name="stuName" v-model="stuName"></td>
                <td><input type="text" name="sex" v-model="sex"></td>
                <td><input type="text" name="birthday" v-model="birthday"></td>
                <td><input :disabled="stuNo.length === 0" type="button" value="添加" @click="addItem"></td>
            </tr>
        </table>
    </div>

</body>

    <script>
        var student = new Vue({
            el :"#student",
            data:{
                students : [{"stuNo":1, "stuName":"马云","sex":"男","birthday":"20201126"}],
                stuNo:'',
                stuName:'',
                sex:'',
                birthday:''
            },
            methods : {
                showstudentList(){
                    //发送ajax异步请求
                    var t = this;
                    axios.post("/student_manager_demo/studentServlet",{params:{"operType":"list"}}).then(function(response){
                        console.log("response----------->"+response);
                     },function(error){

                    })
                },
                addItem:function(){
                    //1.创建一个item元素,设置内容
                    var stuItem = {
                        stuNo : this.stuNo,
                        stuName : this.stuName,
                        sex : this.sex,
                        birthday : this.birthday,
                    }

                    //2.将我们创建好的item对象添加到items
                    this.students.unshift(stuItem);

                    axios.get("/student_manager_demo/studentServlet",{params:{"operType":"add","student":stuItem}}).then(function(response){
                        console.log("response----------->"+response);
                    },function(error){

                    })

                    //添加完毕后,文本框内容删除
                    this.stuNo='';
                    this.stuName='';
                    this.sex='';
                    this.birthday='';
                }
            },

            created(){
               this. showstudentList();
            },

        });

    </script>


</html>